<template>
  <static-container>
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeDetail">存提明细报表</el-breadcrumb-item>
            <el-breadcrumb-item :key="2">提款</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="sub-title">
        时间：{{info.row.date}}
        提款金额：{{info.row.recharge | currency}}
      </template>
      <template slot="right">
        <el-button
          size="medium"
          @click="closeDetail"> 返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>
      <custom-container>
        <custom-container-header no-spacing>
          <el-form :model="filters" ref="form" :disabled="loading"
                   inline size="medium"
                   @submit.native.prevent="gridSearch"
          >
            <el-form-item label="账户名">
              <el-input v-model="filters.username" auto-complete="off" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" native-type="submit">查询</el-button>
            </el-form-item>
          </el-form>
        </custom-container-header>
        <custom-container-body>
          <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
                    :height="tableHeight"
          >
            <el-table-column
              align="center"
              prop="tradeNo"
              width="200px"
              label="交易单号">
            </el-table-column>

            <el-table-column
              align="center"
              prop="userName"
              label="交易时间">
              <template slot-scope="{row}">
                {{row.createTime | toTime}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="userName"
              label="账户名">
            </el-table-column>

            <el-table-column
              align="center"
              prop="tradeType"
              label="交易类型">
            </el-table-column>

            <el-table-column
              align="center"
              label="子类型">
              <template slot-scope="{row}">
                {{row.subType === -1 ? '其他' : row.subType | toConverter('WITHDRAW_TYPE')}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="win"
              label="金额">
              <template slot-scope="{row}">
                {{row.amount | currency}}
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="状态">
              <template slot-scope="{row}">
                <badge-text :value="row.status" dic="WITHDRAW_STATUS"></badge-text>
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="el-table__empty">
                <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
                <div class="el-table-text">暂无数据</div>
              </div>
            </template>
          </el-table>

          <div class="el-pagination-container">
            <el-pagination
              bordered
              :page-sizes="pageSize"
              :disabled="loading"
              @size-change="gridSizeChange" @current-change="gridCurrentChange"
              :current-page="filters.page" :page-size="filters.size"
              :total="tableData.total">
            </el-pagination>
            <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
          </div>
        </custom-container-body>
      </custom-container>
    </static-container-body>
  </static-container>
</template>

<script>
  import {withdrawDetailApi as getApi} from '@/services/api/report';

  import {grid} from '@/build';

  export default {
    name: "withdraw-detail",
    mixins: [grid],

    props: ['info'],

    inject: ['closeDetail'],

    data() {
      return {
        filters: {
          gameId: this.info.row.gameId,
          // date: this.info.filters.date,
          date: _.toTodayTimestamp(this.info.row.date),
          username: undefined,
          size: 10,
        },
        tableData: {
          list: [],
          total: 0,
        }
      };
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
      });

      this.getAll();
    }
  };
</script>

<style scoped>

</style>